import React, { Component } from 'react'
// CSSTransition 进行元素过渡，它也是其它过渡形式都要包裹所用的
//   + in： boolean true进场，false出场，此属性只有在CSSTransition独立使用时才必须
//   + key：唯一值，此属性只有CSSTransition和别的过渡组件配合时必须使用
//   + timeout：过渡切换样式名称它的时长 一般要求和动画时长最好一致
//   + classNames：string | object
//     - string 指定过渡动画样式名称的前缀 classNames='aa'  .aa_xxx
//     - object 指定过渡动画每个阶段的具体的样式名称
//   + unmountOnExit 如果为true则在动画离开完成后，删除当前绑定的dom节点
//   + appear 第1次进入到元素或页面是不会有过渡，如果设置了appear为true，则在第1次也会有过渡
//   + 若干个过渡过程的事件 onEnter onExit
// 注：CSSTransition它里能有一个子元素
// 注：如果元素过渡动画中有形变，则一定要设置一下它的块，为inline-block

// SwitchTransition 切换过渡
//  + mode 切的顺序 out-in | in-out 默认out-in
// <SwitchTransition><CSSTransition></SwitchTransition>
// 此时CSSTransition组件就需要一个key属性，key是一个唯一的

import { CSSTransition, SwitchTransition } from 'react-transition-group'

class Index extends Component {
  state = {
    switch: true
  }

  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState((state) => ({
              switch: !state.switch
            }))
          }}
        >
          添加任务
        </button>
        <br />
        <ul>
          <SwitchTransition mode="out-in">
            <CSSTransition
              key={this.state.switch ? 'aa' : 'bb'}
              classNames="fade"
              timeout={600}
              unmountOnExit
            >
              <div>
                {this.state.switch ? (
                  <h3>Goodbye, world!</h3>
                ) : (
                  <h3>Hello, world!</h3>
                )}
              </div>
            </CSSTransition>
          </SwitchTransition>
        </ul>
      </div>
    )
  }
}

export default Index
